<template>
	<navbar></navbar>
	<textNavbar myprops="卡券"></textNavbar>
	<view class="kaquan">
		<view class="kaquan-vw" v-for="item in list" :key="item.id" :style="{ backgroundColor: getStatusColor(item.status)}">
			<view class="kaquan-vw-top">
				<view class="kaquan-vw-top-content">
					<view class="top-content-left">
						<text class="left-text1">{{item.title}}</text>
						<text class="left-text2">满 {{item.use_min_price}} 减 {{item.coupon_price}}</text>
					</view>
					<view class="top-content-right">
						￥<text> {{item.coupon_price}}</text>
					</view>
				</view>
			</view>
			<view class="kaquan-vw-bottom">
				<view class="bottom-content">
					<text>有效期至: {{item.end_time}}</text>
					<view v-if="item.status !== 2" @click="jumpHandler">立即使用</view>
				</view>
			</view>
			<view class="kaquan-vw-left"></view>
			<view class="kaquan-vw-right"></view>
		</view>
	</view>
</template>

<script>
	import { coupons } from '../../../utils/utils'
	export default {
		data() {
			return {
				list: [], // 初始数组
			}
		},
		onLoad() {
			coupons(e => {
				console.log('优惠卷', e);
				this.list = e.data
			})
		},
		methods: {
			// 动态修改背景颜色
			getStatusColor (status) {
				switch (status) {
					case 0:
						return '#fd744a'; // 假设状态0对应黄色背景
					case 1:
						return '#55c358'; // 假设状态1对应绿色背景
					case 2:
						return '#c7c7c7'; // 假设状态2对应红色背景
					default:
						return '#fd744a'; // 默认背景颜色
				}
			},
			// 点击立即使用跳转
			jumpHandler () {
				uni.redirectTo({
					url:"/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.kaquan {
		width: 100vw;
		height: 100vh;
		background-color: #EDEDED;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.kaquan-vw {
		width: 92vw;
		height: 100px;
		background-color: #fd744a;
		border-radius: 4px;
		color: white;
		position: relative;
		margin-bottom: 5px;
	}
	.kaquan-vw-top {
		width: 100%;
		height: 70px;
		border-bottom: 1px dashed white;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.kaquan-vw-top-content {
		width: 90%;
		height: 45px;
		display: flex;
		justify-content: space-between;
	}
	.top-content-left {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		font-size: 14px;
	}
	.top-content-left > .left-text2 {
		font-size: 16px;
	}
	.top-content-right {
		width: 45px;
		height: 45px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
	}
	.top-content-right > text {
		font-size: 25px
	}
	.kaquan-vw-left {
		width: 20px;
		height: 20px;
		background-color: #EDEDED;
		border-radius: 50%;
		position: absolute;
		left: -13px;
		bottom: 20px;
	}
	.kaquan-vw-right {
		width: 20px;
		height: 20px;
		background-color: #EDEDED;
		border-radius: 50%;
		position: absolute;
		right: -13px;
		bottom: 20px;
	}
	
	.kaquan-vw-bottom {
		width: 100%;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bottom-content {
		width: 90%;
		height: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.bottom-content > text {
		font-size: 8px;
		font-style: italic;
	}
	.bottom-content > view {
		width: 50px;
		height: 20px;
		border-radius: 20px;
		border: solid 1px white;
		font-size: 8px;
		text-align: center;
		line-height: 20px;
	}
	
</style>
